<template>
  <view class="container">
    <!-- 分类导航栏 -->
    <view class="category-bar">
      <scroll-view scroll-x="true" class="category-scroll">
        <view 
          v-for="(category, index) in categories" 
          :key="index" 
          class="category-item"
          :class="{ 'active': selectedCategory === category.value }"
          @click="filterByCategory(category.value)"
        >
          <text>{{ category.label }}</text>
        </view>
      </scroll-view>
    </view>

    <!-- 知识列表 -->
    <view class="knowledge-list">
      <view 
        v-for="(item, index) in filteredKnowledge" 
        :key="item.id" 
        class="knowledge-item"
        @click="goToDetail(item)"
      >
        <view class="item-header">
          <text class="item-title">{{ item.title }}</text>
          <text class="item-category">{{ item.category }}</text>
        </view>
        <text class="item-summary">{{ item.summary }}</text>
        <view class="item-meta">
          <text class="item-author">作者: {{ item.author }}</text>
          <text class="item-date">{{ item.date }}</text>
        </view>
      </view>
    </view>

    <!-- 无结果提示 -->
    <view v-if="filteredKnowledge.length === 0" class="no-result">
      <text>暂无 {{ selectedCategory === 'all' ? '' : categories.find(c => c.value === selectedCategory)?.label }} 类知识</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      selectedCategory: 'all', // 当前选中的分类
      categories: [
        { label: '全部', value: 'all' },
        { label: '宪法', value: 'constitution' },
        { label: '民法', value: 'civil_law' },
        { label: '刑法', value: 'criminal_law' },
        { label: '行政法', value: 'administrative_law' },
        { label: '劳动法', value: 'labor_law' },
        { label: '婚姻家庭', value: 'marriage_family' },
        { label: '知识产权', value: 'ip_law' },
      ],
      // 模拟知识数据（实际项目应从后端获取）
      knowledgeList: [
        {
          id: 1,
          title: '宪法的基本原则',
          summary: '介绍宪法的人民主权、基本人权、法治等基本原则及其意义。',
          category: '宪法',
          author: '法学家',
          date: '2025-04-01',
        },
        {
          id: 2,
          title: '民法典合同编解读',
          summary: '详细解读合同的订立、效力、履行、变更和转让等关键条款。',
          category: '民法',
          author: '律师',
          date: '2025-04-05',
        },
        {
          id: 3,
          title: '刑法中的正当防卫',
          summary: '分析正当防卫的构成要件、防卫过当的界限及法律后果。',
          category: '刑法',
          author: '法官',
          date: '2025-04-10',
        },
        {
          id: 4,
          title: '行政处罚法新修订要点',
          summary: '解读2021年新修订的行政处罚法的主要变化和影响。',
          category: '行政法',
          author: '学者',
          date: '2025-04-12',
        },
        {
          id: 5,
          title: '劳动者权利保护指南',
          summary: '介绍劳动合同签订、工资支付、工时休假等劳动者基本权利。',
          category: '劳动法',
          author: '律师',
          date: '2025-04-15',
        },
        {
          id: 6,
          title: '离婚冷静期制度解析',
          summary: '详解《民法典》中新增的离婚冷静期制度的适用与影响。',
          category: '婚姻家庭',
          author: '律师',
          date: '2025-04-18',
        },
        {
          id: 7,
          title: '商标权的取得与保护',
          summary: '介绍商标注册流程、商标权内容及侵权行为的认定与救济。',
          category: '知识产权',
          author: '专利代理人',
          date: '2025-04-20',
        },
        {
          id: 8,
          title: '个人信息保护法解读',
          summary: '解读《个人信息保护法》的核心内容与合规要点。',
          category: '宪法',
          author: '数据合规专家',
          date: '2025-04-22',
        },
      ]
    };
  },
  computed: {
    filteredKnowledge() {
      if (this.selectedCategory === 'all') {
        return this.knowledgeList;
      }
      return this.knowledgeList.filter(k => k.category === this.selectedCategory);
    }
  },
  methods: {
    filterByCategory(category) {
      this.selectedCategory = category;
    },
    goToDetail(knowledge) {
      // 跳转到知识详情页，传入ID
      uni.navigateTo({
        url: `/pages/popular-law-detail/popular-law-detail?id=${knowledge.id}`
      });
    }
  }
};
</script>

<style scoped>
.container {
  padding: 20rpx;
  background-color: #f8f8f8;
  min-height: 100vh;
}

.category-bar {
  background-color: #fff;
  padding: 20rpx;
  border-radius: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05);
  margin-bottom: 20rpx;
}

.category-scroll {
  white-space: nowrap;
}

.category-item {
  display: inline-block;
  padding: 10rpx 20rpx;
  margin-right: 20rpx;
  background-color: #f0f0f0;
  border-radius: 30rpx;
  font-size: 26rpx;
  color: #666;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.category-item.active {
  background-color: #007aff;
  color: white;
}

.knowledge-list {
  background-color: #fff;
  border-radius: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05);
  padding: 20rpx 0;
}

.knowledge-item {
  padding: 30rpx;
  border-bottom: 1px solid #eee;
}

.knowledge-item:last-child {
  border-bottom: none;
}

.item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10rpx;
}

.item-title {
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
  flex: 1;
  margin-right: 20rpx;
}

.item-category {
  font-size: 24rpx;
  color: #007aff;
  background-color: #e3f2fd;
  padding: 4rpx 10rpx;
  border-radius: 10rpx;
}

.item-summary {
  font-size: 26rpx;
  color: #666;
  line-height: 1.5;
  margin-bottom: 10rpx;
}

.item-meta {
  display: flex;
  justify-content: space-between;
  font-size: 24rpx;
  color: #999;
}

.no-result {
  text-align: center;
  padding: 80rpx 0;
  color: #999;
  font-size: 28rpx;
}
</style>